<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>追溯码识别页面</title>
    <!-- 引入layui框架和jQuery -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.8.11/dist/css/layui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/layui@2.8.11/dist/layui.js"></script>
    <style>
        /* 全局样式 */
        body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .section {
            margin: 10px;
            padding: 10px;
            border: 1px solid #e6e6e6;
            border-radius: 5px;
        }

        /* 表格样式 */
        .table-wrapper {
            display: flex;
            /* 并排布局 */
            gap: 10px;
            /* 表格间隔 */
        }

        .table-container {
            flex: 1;
            height: 300px;
            /* 固定高度 */
            overflow: auto;
            border: 1px solid #e6e6e6;
            border-radius: 5px;
        }

        table {
            border-collapse: collapse;
            width: 100%;
        }

        table th,
        table td {
            border: 1px solid #e6e6e6;
            padding: 10px;
            text-align: center;
            white-space: nowrap;
        }

        table thead tr {
            position: sticky;
            top: 0;
            background-color: #f2f2f2;
            z-index: 2;
        }

        /* 固定列 */
        .fixed-column {
            position: sticky;
            left: 0;
            background-color: #fff;
            z-index: 1;
        }

        .fixed-action {
            position: sticky;
            right: 0;
            background-color: #fff;
            z-index: 1;
        }

        /* 底部栏固定 */
        .bottom-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #fff;
            border-top: 1px solid #e6e6e6;
            padding: 10px;
            text-align: right;
        }
    </style>
</head>

<body>
    <!-- 填写基本信息 -->
    <div class="section">
        <fieldset class="layui-elem-field">
            <legend>填写基本信息</legend>
            <div class="layui-form-item">
                <label class="layui-form-label">单据类型:</label>
                <div class="layui-input-inline"><input type="text" class="layui-input"></div>
                <label class="layui-form-label">单据号:</label>
                <div class="layui-input-inline"><input type="text" class="layui-input"></div>
                <label class="layui-form-label">进入时间:</label>
                <div class="layui-input-inline"><input type="date" class="layui-input"></div>
            </div>
        </fieldset>
    </div>

    <!-- 添加追溯码 -->
    <div class="section">
        <fieldset class="layui-elem-field">
            <legend>添加追溯码</legend>
            <div>
                <input type="text" placeholder="输入追溯码" class="layui-input" style="width: 80%; display: inline-block;">
                <button class="layui-btn layui-btn-normal">确定</button>
            </div>
        </fieldset>
    </div>

    <!-- 表格区域 -->
    <div class="section table-wrapper">
        <!-- 追溯码识别记录表格 -->
        <div class="table-container">
            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <li class="layui-this" id="tab-all">全部 <span id="all-count">(2)</span></li>
                    <li id="tab-failed">仅看失败 <span id="failed-count">(1)</span></li>
                </ul>
                <table>
                    <thead>
                        <tr>
                            <th class="fixed-column">追溯码</th>
                            <th>级别</th>
                            <th>状态</th>
                            <th class="fixed-action">操作</th>
                        </tr>
                    </thead>
                    <tbody id="record-body">
                        <tr>
                            <td class="fixed-column">81377540155999363656</td>
                            <td>1</td>
                            <td>识别成功</td>
                            <td class="fixed-action"><a href="#" class="layui-btn layui-btn-sm layui-btn-danger">删除</a>
                            </td>
                        </tr>
                        <tr>
                            <td class="fixed-column">81377540155999300000</td>
                            <td>2</td>
                            <td>识别失败</td>
                            <td class="fixed-action"><a href="#" class="layui-btn layui-btn-sm layui-btn-danger">删除</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 按药品统计表格 -->
        <div class="table-container">
            <table>
                <thead>
                    <tr>
                        <th class="fixed-column">药品通用名</th>
                        <th>数量</th>
                        <th>剂型</th>
                        <th>包装规格</th>
                        <th class="fixed-action">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="fixed-column">丁酸氯化钠软膏</td>
                        <td>1</td>
                        <td>乳膏剂</td>
                        <td>25克/盒</td>
                        <td class="fixed-action"><a href="#" class="layui-btn layui-btn-sm layui-btn-normal">详细</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- 底部操作栏 -->
    <div class="bottom-bar">
        <button class="layui-btn layui-btn-primary">取消</button>
        <button class="layui-btn layui-btn-normal">提交并继续</button>
    </div>

    <script>
        $(document).ready(function () {
            const records = [
                { code: "81377540155999363656", level: "1", status: "识别成功", failed: false },
                { code: "81377540155999300000", level: "2", status: "识别失败", failed: true }
            ];

            function renderTable(filterFailed = false) {
                const tbody = $("#record-body");
                tbody.empty();
                let failedCount = 0;

                records.forEach(record => {
                    if (filterFailed && !record.failed) return;
                    if (record.failed) failedCount++;

                    tbody.append(`
                    <tr>
                        <td class="fixed-column">${record.code}</td>
                        <td>${record.level}</td>
                        <td>${record.status}</td>
                        <td class="fixed-action"><a href="#" class="layui-btn layui-btn-sm layui-btn-danger">删除</a></td>
                    </tr>
                `);
                });

                $("#all-count").text(`(${records.length})`);
                $("#failed-count").text(`(${failedCount})`);
            }

            // 初次渲染
            renderTable();

            // 面板切换
            $("#tab-all").click(function () {
                renderTable(false);
                $(this).addClass("layui-this").siblings().removeClass("layui-this");
            });

            $("#tab-failed").click(function () {
                renderTable(true);
                $(this).addClass("layui-this").siblings().removeClass("layui-this");
            });
        });
    </script>
</body>

</html>